import { Drawer, Tab, Message } from '@alifd/next';
import React from 'react';
import TaskInfo from './TaskInfo';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import { useStore } from '@/hooks';
import TaskLogs from './TaskLogs';

const TaskInfoDrawer = (props) => {
  const {
    visible,
    onClose,
    task,
    modal,
    onCancel,
  } = props;

  const { ccTaskStore: store } = useStore();

  const handleUpdate = async (result) => {
    if (!_.isEmpty(result)) {
      try {
        await store.updateTask(toJS(result));
        Message.success({ content: t`修政成功` });
      } catch (e) {
        Message.error({ content: t`修政失败`, duration: 7000 });
        throw e;
      }
    }
    onCancel?.();
  };

  const tabItems = [
    {
      title: '任务信息',
      content: (
        <TaskInfo
          task={task}
          modal={modal}
          visible={visible}
          handleUpdate={handleUpdate}
          onCancel={onCancel}
        />
      ),
    },
    {
      title: '任务历史变更记录',
      content: (
        <TaskLogs task={task} />
      ),
    },
  ];

  return (
    <Drawer
      visible={visible}
      title={t`任务${task?.id}详情`}
      onClose={onClose}
      closeMode={['esc', 'mask', 'close']}
      style={{ maxWidth: '90%' }}
      width="100%"
    >
      <Tab>
        {tabItems.map((item, idx) => (
          <Tab.Item
            title={t`${item.title}`}
            key={`${idx}-${item.title}`}
          >
            {item.content}
          </Tab.Item>
        ))}
      </Tab>
    </Drawer>
  );
};

export default observer(TaskInfoDrawer);
